<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head><script type="text/javascript" src="/StudentInfo/utils/scripts/flat-ui.js"></script><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><link rel="shortcut icon" href="/StudentInfo/utils/image/favicon.ico" type="image/x-icon" />
<meta charset="UTF-8">
<title>选课管理系统</title>

<!-- 标题图标、CSS、js、jQ 
<link href="/online/image/favicon.ico" rel="shortcut icon">
<link rel="stylesheet" type="text/css" href="/online/css/main.css">
<script src="/online/js/fun.js" type="text/javascript"></script>-->
<script type="text/javascript" src="/StudentInfo/utils/js/jquery-3.3.1.min.js"></script>

<!-- Loading Bootstrap -->
<link href="/StudentInfo/utils/css/vendor/bootstrap.min.css" rel="stylesheet">
<!-- Loading Flat UI Pro -->
<link href="/StudentInfo/utils/css/flat-ui.css" rel="stylesheet">
<!-- Loading Flat UI JS -->
<script type="text/javascript" src="/StudentInfo/utils/scripts/flat-ui.min.js"></script>
<script type='text/javascript' src='/StudentInfo/utils/scripts/particles.js'></script><link href="/StudentInfo/utils/css/animate.css" rel="stylesheet"></head>
<style type="text/css">
	.pageChose {
		display:flex;
		justify-content:center;
		align-items:center;
		margin-bottom: 30px;
	}

	.widthPwd {
		width: 30%;
	}

	.cancelStyle {
		margin-left: 110px;
		margin-right: -100px;
	}

	.tipStyle {
		margin-bottom: 10px;
		margin-top: -20px;
		margin-left: 12px;
	}
</style>
<body><div id="particles-js"><canvas class="particles-js-canvas-el" width="1322" height="774" style="width: 100%; height: 100%;"></canvas></div>
<jsp:include page="studentLeft.jsp" />
<div class="container">
	<div class="row">
		<div class="col-md-12">
			<h5>修改密码</h5>
			<form action="../StudentHandler/moditypasswordstu" method="post">
				<div class="pageChose col-md-12">
					<div class="col-md-2" style="text-align: right">旧密码<span style="color: red">*</span></div>
					<input id="oldPwd" type="password" name="oldPassword" class="form-control widthPwd" placeholder="请输入旧密码"
					    onkeyup="checkPassword()" maxlength="16"/>
				</div>
				<div class="pageChose col-md-12">
					<div class="col-md-2" style="text-align: right">新密码<span style="color: red">*</span></div>
					<input id="newPwd" onfocus="isClick('newPwd')" type="password" name="newPassword" class="form-control widthPwd"
					    tag="0" placeholder="请输入新密码" onkeyup="checkPassword()"  maxlength="16"/>
				</div>
				<div class="pageChose col-md-12">
					<div class="col-md-2" style="text-align: right">确认新密码<span style="color: red">*</span></div>
					<input id="rePwd" onfocus="isClick('rePwd')" type="password" name="rePassword" class="form-control widthPwd"
					    tag="0" placeholder="请确认新密码" onkeyup="checkPassword()" maxlength="16"/>
				</div>
				<div class="pageChose col-md-12 tipStyle" id="tip"></div>
				<div class="col-md-12 pageChose">
					<input id="submit" disabled="disabled" type="submit" class="btn btn-primary btn-wide login-btn" value="确定修改"/>
					<a class="btn btn-primary btn-wide login-btn cancelStyle" href="javascript:history.go(-1)">取消</a>
				</div>
			</form>
		</div>
	</div>
</div>
<script type="text/javascript">

	// onfocus 输入框聚焦事件
	function isClick(id) {
		// 新密码框和确认密码框点击一下，就会给标签tag赋值为1
		document.getElementById(id).setAttribute("tag","1");
	}

	// onkeyup 键盘弹起触发事件
	function checkPassword() {
		// 获取密码
		let oldPwd = document.getElementById("oldPwd").value;
		let newPwd = document.getElementById("newPwd").value;
		let rePwd = document.getElementById("rePwd").value;

		// 获取新密码框和确认密码框的标签tag的值
		let newPwdTag = document.getElementById("newPwd").getAttribute("tag");
		let rePwdTag = document.getElementById("rePwd").getAttribute("tag");

		// 如果都被点击过了，才判断两次密码是否相等
		if(newPwdTag == 1 && rePwdTag == 1 && newPwd != rePwd) {
			document.getElementById("tip").innerHTML="<font color='red'>两次输入密码不一致!</font>";
			document.getElementById("submit").disabled = true;
		} else {
			document.getElementById("tip").innerHTML="";
		}

		// 三个密码框都不为空时，提交按钮取消置灰
		if (oldPwd != null && oldPwd != '' && newPwd != null && newPwd != '' && rePwd != null
			&& rePwd != '' && newPwd == rePwd) {
			document.getElementById("submit").disabled = false;
		}
	}
</script>

<script type="text/javascript" src="/StudentInfo/utils/scripts/flat-ui.js"></script>
<script src="/StudentInfo/utils/scripts/bganimation.js"></script>
</body>
</html>